<template>
    <div class="share">
        <el-card class="card">
            <div slot="header" class="head">
                <div class="avatar">
                    <el-avatar :src="userInfo.avatar" :size="50"></el-avatar>
                </div>
                <div class="info">
                    <div class="user">
                        <span>{{ userInfo.nickname }}</span>
                    </div>
                    <div class="file-info">
                        <div class="file-item">
                            <i class="el-icon-document"></i>
                            <span class="ellipsis">{{ fileInfo.filename }}</span>
                        </div>
                        <div class="file-item">
                            <i class="el-icon-time"></i>
                            <span>{{ fileInfo.createTime }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <el-form ref="form" :model="form" label-width="80px" :rules="rules" :hide-required-asterisk="true">
                    <el-form-item label="提取码" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item>
                </el-form>
                <div class="center">
                    <el-button type="primary" @click="onSubmit">提取文件</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "check",
    data() {
        return {
            form: {
                code: null
            },
            rules: {
                code: [
                    { required: true, message: "请输入提取码", trigger: 'blur' }
                ],
            },
            userInfo: {},
            fileInfo: {}
        }
    },
    mounted() {
        this.judgeCode()
        this.getShareInfo()
    },
    methods: {
        async onSubmit() {
            let res = await this.$store.dispatch("getCheck", {
                uuid: this.$route.params.uuid,
                code: this.form.code
            })
            if (res.success) {
                if (res.message == "验证成功") {
                    this.$message.success(res.message)
                    this.$router.push("/file/share/" + this.$route.params.uuid)
                }
                else this.$message.error(res.message)
            }
            else this.$global.resError(res)
        },
        judgeCode() {
            let code = this.$route.query.code
            if (code != null) this.form.code = code
        },
        async getShareInfo() {
            var uuid = this.$route.params.uuid;
            let res = await this.$store.dispatch("getShareInfo", uuid)
            if (res.success) {
                // 已经验证过了
                if (res.data.flag) {
                    this.$router.push("/file/share/" + uuid);
                }
                else {
                    this.fileInfo = res.data.fileInfo
                    this.userInfo = res.data.userInfo
                }
            }
            else this.$global.resError(res)
        }
    },
}
</script>

<style scoped>
.share {
    height: 100%;
    width: 100%;
    position: relative;
    background: url(./images/share_bg.png);
    background-repeat: repeat-x;
    background-position: 0 bottom;
    background-color: #eef2f6;
}

.card {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 300px;
}

.head {
    display: flex;
    align-items: center;
    color: white;
}

.avatar {
    width: 70px;
    text-align: center
}

.user {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info{
    width: calc(100%-80px);
}

.createTime {
    font-size: 13px;
}

::v-deep .el-card__header {
    background-color: #409EFF;
}

.file-info {
    display: flex;
    align-items: center;
}

.file-item {
    font-size: 13px;
    font-weight: 550;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.file-item i {
    margin-right: 4px;
}

.filename {
    font-size: 13px;
}

.center {
    text-align: center;
}

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
</style>